<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            .list-container { border: 1px solid grey ; margin: 50px ;  }
            .list-container>* { border: 1px solid blue ; margin: 10px ;  }
            .list-container>* li { border: 1px solid red ; }

            .first ol li {
                list-style-type : upper-roman ; /* 取值较多，参见 https://www.w3school.com.cn/cssref/pr_list-style-type.asp */
                list-style-position: inside ;
            }

            .second ol li {
                 list-style-type : square ;
                 list-style-position: outside ;
             }

            .third ul li {
                list-style-image: url("yewen.jpg"); /* 使用图片做项目符号 */
                list-style-type : square ;
                list-style-position: outside ;
            }

            .fourth ul li {
                /* 使用一个 list-style 属性声明多个属性 */
                list-style: url("yewen.jpg") none outside;
            }

        </style>
    </head>
    <body>

        <div class="list-container first">
            <ol>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ol>
        </div>

        <div class="list-container second">
            <ol>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ol>
        </div>

        <div class="list-container third">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>

        <div class="list-container fourth">
            <ul>
                <li>川菜</li>
                <li>湘菜</li>
                <li>赣菜</li>
                <li>粤菜</li>
            </ul>
        </div>
        
    </body>
</html>